<template>
  <micro-app
    v-if="isType === 'microapp'"
    :name="name"
    :url="app.url"
    :baseroute="path"
    :data="microAppData"
    style="height: 100vh; width: 100vw"
    @datachange="handleDataChange"
  ></micro-app>
  <WujieVue
    v-else
    width="100%"
    height="100%"
    :name="name"
    :url="app.url"
    :props="{ ...props, appName: name }"
    :before-load="beforeLoad"
    :before-mount="beforeMount"
    :after-mount="afterMount"
    :before-unmount="beforeUnmount"
    :after-unmount="afterUnmount"
    :activated="activated"
    :deactivated="deactivated"
    :load-error="loadError"
    :plugins="[
      {
        cssAfterLoaders: [{ content: 'html{view-transition-name:none}' }]
      }
    ]"
  ></WujieVue>
</template>

<script setup>
import { apps, commonProps } from '@/micro-app/appData'
import { useRoute } from 'vue-router'
const props = { ...commonProps }
const route = useRoute()
const microAppData = reactive({ msg: 'hello micro-app' })
const { path, name, type } = route.query
const isType = ref(type)
const app = apps.find(item => item.name === name)
const handleDataChange = e => {
  let data = e.detail.data
  console.log('data来自子应用的数据>>>→➡️➡️➡️', data)
}

function beforeLoad(appWindow) {
  console.log(`${appWindow.__WUJIE.id}: beforeLoad`)
}
function beforeMount(appWindow) {
  console.log(`${appWindow.__WUJIE.id}: beforeMount`)
}
function afterMount(appWindow) {
  console.log(`${appWindow.__WUJIE.id}: afterMount`)
}
function beforeUnmount(appWindow) {
  console.log(`${appWindow.__WUJIE.id}: beforeUnmount`)
}
function afterUnmount(appWindow) {
  console.log(`${appWindow.__WUJIE.id}: afterUnmount`)
}
function activated(appWindow) {
  console.log(`${appWindow.__WUJIE.id}: activated`)
}
function deactivated(appWindow) {
  console.log(`${appWindow.__WUJIE.id}: deactivated`)
}
function loadError(url, err) {
  console.log(`${route.name}: loadError`, url, err)
}
</script>
